<template>
	<div>
		<header id="header" class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">导航栏</h1>
		</header>
		<div class="content">
			<img src="static/images/banner.png" alt="" class="img" />
			<div class="type">
				<span>标准-居室</span>
				<span>纯南向</span>
				<span>精装修</span>
				<span>产权清晰</span>
				<span>诚信出售</span>
			</div>
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="">性价比</span>
						<div class="mui-media-body">
							<img src="../assets/images/grey-red-star.png" alt="" />
							<img src="../assets/images/grey-red-star.png" alt="" />
							<img src="../assets/images/grey-red-star.png" alt="" />
							<img src="../assets/images/grey-red-star.png" alt="" />
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="">分值</span>
						<div class="mui-media-body">6.75分</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="">单价</span>
						<div class="mui-media-body">12000万/平</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="">户型</span>
						<div class="mui-media-body">一室一厅</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="">建筑面积</span>
						<div class="mui-media-body">75m²</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="">总价</span>
						<div class="mui-media-body">95万</div>
					</a>
				</li>
			</ul>
			<div class="year">
				<span>满五年</span>
				<span class="zijian">房主自荐</span>
			</div>
			<ul class="con">
				<li>单价: <span>11457元/m²</span></li>
				<li>挂牌: <span>2018年8月15日</span></li>
				<li>朝向: <span>南</span></li>
				<li>楼层: <span>中楼层/24层</span></li>
				<li>楼型: <span>板塔结合</span></li>
				<li>电梯: <span>暂无数据</span></li>
				<li>装修: <span>精装房</span></li>
				<li>年代: <span>2011年</span></li>
				<li>用途: <span>普通住宅</span></li>
				<li>权限: <span>商品房</span></li>
				<li class="ys">首付预算: <span>首付26万,月供3521元</span></li>
				<li class="ys">小区: <span>富力城北区</span></li>
			</ul>
			<router-link to="/morexiangqing" class="mui-btn mui-btn-primary xingxi">更多房源信息</router-link>
		</div>
	</div>
</template>
<script>
</script>
<style scoped>
	.mui-bar-nav {
		position: fixed;
		top: 0;
		height: 50px;
		background-color: #0186c2;
	}

	.mui-bar-nav a {
		color: #fff;
	}

	.mui-bar-nav.mui-bar .mui-icon {
		padding-top: 12px;
	}

	.mui-bar .mui-title {
		line-height: 50px;
	}

	.content {
		padding-top: 50px;
		padding-bottom: 10px;
		background-color: #fff;
		margin-bottom: 100px;
	}

	.content .img {
		width: 100%;
	}

	.content img {
		width: 15px;
	}

	.content .type {
		padding: 10px 15px;
		display: flex;
		justify-content: space-between;
		font-size: 14px;
	}

	.mui-grid-view.mui-grid-9 {
		background-color: #fff;
		border: 0;
	}

	.mui-grid-view.mui-grid-9 .mui-table-view-cell {
		border: 0;
		padding: 0;
		font-size: 14px;
	}

	.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
		color: red;
		font-size: 14px;
	}

	.year {
		font-size: 14px;
		padding-left: 15px;
		color: #0186c2;
	}

	.year .zijian {
		color: #fe6638;
		margin-left: 20px;
	}

	.con {
		list-style: none;
		padding: 0 15px;
		font-size: 14px;
		margin: 0;
	}

	.con li {
		width: 45%;
		float: left;
		color: #ACACB4;
		padding: 5px 0;
	}

	.con li.ys {
		width: 100%;
	}

	.con li span {
		color: #000;
		margin-left: 6px;
	}

	.content .xingxi {
		font-size: 14px;
		line-height: 34px;
		width: 90%;
		padding: 0;
		margin: 0 15px;
	}
</style>
